<template>
  <div class="testTwoPage pad-16">
    <h1>page2</h1>

    <h4 class="mt-10">---孙子组件修改爷爷组件数据 响应式---</h4>

    <div>
      <div class="mt-10">爷爷:</div>
      <div class="mt-10">第一种方法</div>
      <!-- <div class="mt-10">obj: {{ obj }}</div> -->
    </div>

    <div class="mt-10">
      第二种方法
      {{ objs }}
    </div>

    <div class="mt-10">
      watch监听到值的变化了吗？
      {{ watchNum == 1 ? '没有' : '监听到了' }}
      监听到了{{ watchNum - 1 }}次改变
    </div>

    <FatherPage></FatherPage>
  </div>
</template>

<script>
import FatherPage from './components/fatherPage'

export default {
  name: 'testTwoPage',
  components: {
    FatherPage,
  },
  props: {},
  provide() {
    return {
      obj: this.obj,
    }
  },
  data() {
    return {
      watchNum: 0,
      obj: {
        msg: '修改前',
        num: 0,
      },
    }
  },
  computed: {
    objs() {
      return this.obj
    },
  },
  watch: {
    obj: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue)
        this.watchNum += 1
        console.log('this.watchNum', this.watchNum)
        if (newValue.num == 0) {
          this.watchNum = 1
        }
      },
      immediate: true, // 进来就监听
      deep: true, // 深度监听
    },
  },
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style scoped lang="scss">
.testTwoPage {
  height: 100%;
}
</style>
